<script>
	import {
		deleteRecordByImportIds,
		importRecords
	} from '@/api/api.js';
	import {
		useTypeStore
	} from '@/store/type';
  import categoryObj from '@/common/categoryParse'
	export default {
		name: "index.vue",
		data() {
			return {
				importData: [],
				showPopup: false,
				// 滑动操作配置
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				record: {},
				updateIndex: null,
				importType: '',


				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/image/import.png',
						selectedIconPath: '/static/image/import.png',
						text: '导入',
						active: false
					},
					{
						iconPath: '/static/image/category_parse.png',
						selectedIconPath: '/static/image/category_parse.png',
						text: '类目识别',
						active: false
					}
				]
			}
		},
		methods: {
			parseType() {
				if (this.importData === undefined || this.importData.length === 0) {
					return
				}
        this.importData.forEach(item=>{
          const key = item.old_type_key;
          let parseResult = categoryObj[key];
          if (parseResult != null){
            item.type_id =parseResult.id
            item.title = parseResult.title
            item.type = parseResult.type
            item.icon = parseResult.icon
          }
        })

			},
			//左滑操作 编辑/删除
			onClick(e, index) {
				let obj = this.importData[index]
				const self = this
				// 删除
				if (e.content.text === '删除') {
					uni.showModal({
						title: "删除",
						content: `确认删除[${obj.title}]${obj.type == 0 ? '支出' : '收入'}${obj.remark ? ',[' + obj.remark + ']' : ''}吗?`,
						success: async function(res) {
							if (res.confirm) {
								//todo delete
								self.importData.splice(index, 1)
							}
						}
					})
				} else { //编辑
					self.updateIndex = index
					console.log(obj)
					this.record = obj
					this.showPopup = true

				}
			},
			updateRecordConfirm(e) {
				if (null === this.updateIndex) {
					return
				}
				let data = this.importData[this.updateIndex]
				data.create_time = e.create_time
				data.type_id = e.type_id
				data.icon = e.icon
				data.num = e.num
				data.remark = e.remark
				data.type = e.type
				data.title = e.title
				this.$set(this.importData, this.updateIndex, data)
				this.showPopup = false
			},
			trigger: async function(e) {
				if (e.index === 0) {
					// 先删除之前的导入数据
					// 过滤掉import_id为空的对象
					const filteredList = this.importData.filter(item => item.import_id !== null && item.import_id !==
						'');

					// 提取每个对象的import_id值
					const importIds = filteredList.map(item => item.import_id);
					if (importIds.length > 0) {
						await deleteRecordByImportIds(importIds);
					}


					// 批量新增
					await importRecords(this.importData, true)
				}
				if (e.index === 1) {
					this.parseType();
				}
			}
		},

		async onLoad() {
			this.importData = uni.getStorageSync('importData')
			this.importType = uni.getStorageSync('importType')
		},
		computed: {
			typeList() {
				return this.type ? this.typeStore.inType : this.typeStore.payType
			}
		},
		setup() {
			const typeStore = useTypeStore()
			return {
				typeStore
			}
		}
	}
</script>

<template>
	<view>
		<view class="flex flex-column p-24r mb-10 bg-white">
			<!-- 当天记录 -->
			<view v-for="(acc,index) in importData" :key="index" class="detail-item my-10">
				<!-- 左滑 编辑，删除 -->
				<uni-swipe-action-item :right-options="options" @click="onClick($event,index)">
					<view class="flex items-center px-12">
						<text v-if="acc.image===''" :style="{'background-color': acc.type===1 ?'#f9ae3d':'#42b479'}"
							style="color: white;font-size: 30px;" class="iconfont p-16r mr-20r rounded-20p"
							:class="acc.icon" />
						<image v-else :src="acc.image" class="w-46p h-46p mr-20r rounded-20p" mode="aspectFill"
							@click="showBigImage(acc.image)" />
						<view class="flex-auto flex flex-column content-start gap-5px">
							<text>{{ acc.title }}</text>
							<text class="text-10" style="color: #999;">{{ acc.create_time }}</text>
						</view>
						<text class="flex-auto px-4 text-12"
							style="color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100rpx">{{ acc.remark }}</text>
						<text :class="{'high':acc.type===1}">
							<text>{{ acc.type === 0 ? '-' : '+' }}</text>
							{{ acc.num }}
						</text>
					</view>
				</uni-swipe-action-item>
			</view>
		</view>

		<view>
			<uni-fab :content="content" horizontal="right" vertical="bottom" direction="vertical"
				@trigger="trigger"></uni-fab>
		</view>
		<setAccount :visible="showPopup" :record="record" :is-update="true" @close="showPopup=false"
			@updateConfirm="updateRecordConfirm"></setAccount>

	</view>

</template>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		// justify-content: center;
	}

	.detail-item {
		padding-bottom: 16px;
		border-bottom: 2px dashed #eee;

		&:last-child {
			margin-bottom: 0;
			border: none;
			padding-bottom: 5px;
		}
	}

	text.high {
		color: orange;
	}

	.empty {
		color: #ccc;

		.iconfont {
			font-size: 60px;
			margin-bottom: 10px;
		}
	}

	.money {
		font-size: 25px;
		color: white;
		font-weight: bold;
	}
</style>